<template>
  <div>
    <div id="container">
      <div @click="goVideoDetails(item.id)" v-for="item in videoHaiNanList" class="video_hainan_list">
        <div class="img_content">
          <div>
            <img v-if="item.image !== null" v-lazy.container="item.image">
            <img v-else src="../../assets/image/sale.png" alt="">
          </div>
          <div class="text_content">
            <div class="img_title">{{item.title}}</div>
            <!--<div class="img_title">{{item.title | dropStr(30)}}</div>-->
            <!--<div class="content_content">{{item.content | dropStr(30)}}</div>-->
            <div class="img_bottom">
              <div>
                <div class="icon_name">
                  <!--<div>-->
                  <span class="iconfont icon-shoucang"></span>{{item.praise_num}}
                  <!--</div>-->
                </div>
                <div class="img_time">
                  <!--<span>-->
                  {{item.friend_date}}
                  <!--</span>-->
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {Lazyload} from 'mint-ui';

  Vue.use(Lazyload);
  export default {
    props: {
      videoHaiNanList: {
        type: Array
      }
    },
    name: 'HaiNan',
    data() {
      return {}
    },
    methods: {
      goVideoDetails(id) {
        let that = this;
        that.$router.push({name:'VideoDetails',params:{id:id}})
      }
    },
    filters: {
      dropStr: function(str, value) {
        if (str && str.length > value) {
          return str.substring(0, value) + '...';
        } else {
          return str;
        }
      },
      dropDate: function(date) {
        if (date)
          return date.substring(5, 11);
        else
          return '';
      }
    }

  }
</script>

<style scoped>
  .video_hainan_list {
    /*height: 200px;*/
    margin-top: 10px;
    background-color: #ffffff;
    padding: 10px;

  }

  .video_hainan_list:nth-child(1) {
    margin-top: 0;
  }

  .video_hainan_list .img_content {
    display: flex;
    height: 85px;
    position: relative;
  }

  .video_hainan_list img {
    height: 85px;
    width: 110px;
  }

  .video_hainan_list .img_content .img_title {
    color: #333333;
    width: 100%;
    font-size: 0.9rem;

  }

  .video_hainan_list .text_content {
    position: relative;
    margin-left: 10px;
    width: 100%;
  }

  /*.video_hainan_list .img_content .content_content {*/
  /*color: #999;*/
  /*!*overflow: hidden;*!*/
  /*font-size: 0.8rem;*/
  /*position: absolute;*/
  /*bottom: 0;*/
  /*right: 0;*/
  /*}*/

  .img_bottom {
    font-size: 0.8rem;
    color: #999;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .img_bottom>div {
    display: flex;
    justify-content: space-between;
  }

  .img_bottom .icon_name .iconfont {
    font-size: 16px;
    margin-right: 10px;
    color: #333;
  }

  .img_bottom .icon_name > div {
    margin-right: 20px;
  }
</style>
